<!--课程管理列表-->
<template>
  <div class="courseList">
    <div class="top">
      <el-form ref="form" :inline="true" :model="form" label-width="80px">
        <el-form-item label="课程名称">
          <el-input v-model="form.courseName" placeholder="课程名称" size="small"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择" size="small">
            <el-option label="全部" value=""></el-option>
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="refer">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        class="btn"
        size="small"
        @click="$router.push({name: 'createCourse'})">
        +新建课程
      </el-button>
    </div>
    <el-card>
      <el-table
        :loading="isLoading"
        :data="courseList"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="id"
          label="ID"
          width="60">
        </el-table-column>
        <el-table-column
          align="center"
          prop="courseName"
          label="课程名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="price"
          label="价格">
        </el-table-column>
        <el-table-column
          align="center"
          prop="sortNum"
          label="排序">
        </el-table-column>
        <el-table-column
          align="center"
          label="状态">
          <template slot-scope="scope">
            <el-switch
              :disabled="scope.row.isStatusLoading"
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="changeEvent(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="editCourse(scope.row.id)" size="mini">编辑</el-button>
            <el-button size="mini" @click="sectionContent(scope.row)">内容管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="form.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalcount">
    </el-pagination>
  </div>
</template>

<script>
import { getQueryCourses, changeState } from '@/services/courses'
export default {
  name: 'courseList',
  data () {
    return {
      form: {
        currentPage: 1,
        pageSize: 10
      },
      courseList: [],
      totalcount: 0,
      // 加载状况
      isLoading: false
    }
  },
  created () {
    this.getQueryCourses()
  },
  methods: {
    // 按照查询条件获取课程数据信息列表
    async getQueryCourses () {
      this.isLoading = true
      // 接收课程信息的接口,当传的值为空时,数据无法请求到
      const { data } = await getQueryCourses(this.form)
      console.log(data)
      if (data.code === '000000') {
        // 给媒体数据设置属性,标识状态是否处于切换中,默认 false
        data.data.records.forEach(item => {
          item.isStatusLoading = false
        })
        this.courseList = data.data.records
        this.totalcount = data.data.total
        this.isLoading = false
      }
    },
    handleSizeChange (val) {
      this.form.currentPage = 1
      this.form.pageSize = val
      this.getQueryCourses()
    },
    handleCurrentChange (val) {
      this.form.currentPage = val
      this.getQueryCourses()
    },
    // 查询
    refer () {
      this.form.currentPage = 1
      this.getQueryCourses()
    },
    // 改变上下架
    async changeEvent (row) {
      console.log(row)
      // 请求发送前,更改课程操作状态
      row.isStatusLoading = true
      const obj = {
        courseId: row.id,
        status: row.status
      }
      const { data } = await changeState(obj)
      if (data.code === '000000') {
        this.$message.success(`${row.status === 1 ? '上架' : '下架'}成功`)
        // 请求完毕,更改课程操作状态
        row.isStatusLoading = false
      }
    },
    // 编辑课程
    editCourse (id) {
      this.$router.push({ name: 'editCourse', params: { id } })
    },
    // 内容管理
    sectionContent (row) {
      const courseId = row.id
      const courseName = row.courseName
      // this.$emit('handleCourseName', courseName)
      this.$router.push({
        name: 'sections',
        params: { courseId },
        query: { courseName }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.courseList {
  overflow: hidden;
  .top {
    width: 100%;
    float: left;
    .el-form {
      float: left;
    }
    .btn {
      float: right;
    }
 }
}

</style>
